<template>
    <div class="sku">
        <el-form label-wieth="70">
            <el-form-item label="sku名称">
                <el-input placeholder="请输入sku名称" v-model="skuParams.skuName"></el-input>
            </el-form-item>
            <el-form-item label="价格(元)">
                <el-input type="number" placeholder="请输入价格" v-model="skuParams.price"></el-input>

            </el-form-item>
            <el-form-item label="重量(克)">
                <el-input type="number" placeholder="请输入重量" v-model="skuParams.weight"> </el-input>

            </el-form-item>
            <el-form-item label="sku描述">
                <el-input type="textarea" v-model="skuParams.skuDesc"></el-input>
            </el-form-item>
            <el-form-item label=" 平台属性">
                <el-form :inline="true" label-width="auto">
                    <el-form-item :label="item.attrName" v-for="item in platformData" :key="item.id">
                        <el-select style="width: 160px" v-model="item.attrIdAndAttrvalueId">
                            <el-option v-for="item1 in item.attrValueList" :key="item1.id" :label="item1.valueName"
                                :value="`${item.id}:${item1.id}`"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </el-form-item>
            <el-form-item label="销售属性">
                <el-form :inline="true" :model="saleAttrData">
                    <el-form-item v-for="item in saleAttrData" :key="item.id" :label="item.saleAttrName">
                        <el-select style="width: 160px" v-model="item.saleAttrIdAndSaleValue">
                            <el-option v-for="item1 in item.spuSaleAttrValueList" :key="item1.id"
                                :label="item1.saleAttrValueName" :value="`${item.id}:${item1.id}`"></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

            </el-form-item>
            <el-form-item label="图片名称">
                <el-table border :data="imageData" ref="tableRef">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="图片">
                        <template #default="scope">
                            <img :src="scope.row.imgUrl" style="width: 100px;height: 100px;">
                        </template>
                    </el-table-column>

                    <el-table-column label="名称" prop="imgName"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="primary" @click="setDefault(scope.row)">设置为默认</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-form-item>
            <el-form-item label-width="70">
                <el-button type="primary" @click="saveSku">保存</el-button>
                <el-button>取消</el-button>

            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { reqAttrInfoList } from '@/api/product/attr'
import { reqSpuImageList, reqSpuSaleAttr, reqAddSku } from '@/api/product/spu/index'
import { ElMessage } from 'element-plus';
const emits = defineEmits(['changeScreen'])
const imageData = ref<any>([])
const saleAttrData = ref<any>([])
const platformData = ref<any>([])
const tableRef = ref()
const skuParams = ref<any>({
    category3Id: '',
    price: '',
    skuAttrValueList: [],
    skuDefaultImg: "",
    skuDesc: "",
    skuImageList: [],
    skuName: "",
    skuSaleAttrValueList: [],
    spuId: '',
    tmId: '',
    weight: ""
})

const initSkuData = async (c1Id: string, c2Id: string, row: any) => {
    console.log(row);
    skuParams.value.category3Id = row.category3Id
    skuParams.value.spuId = row.id
    skuParams.value.tmId = row.tmId
    const res = await reqAttrInfoList(c1Id, c2Id, row.category3Id)
    platformData.value = res.data
    const res1 = await reqSpuImageList(row.id)
    imageData.value = res1.data
    const res2 = await reqSpuSaleAttr(row.id)
    saleAttrData.value = res2.data

}
const setDefault = (row: any) => {
    tableRef.value.clearSelection()
    tableRef.value.toggleRowSelection(row, true)
    skuParams.value.skuDefaultImg = row.imgUrl
}
const saveSku = async () => {
    const attrIdAndAttrvalueId = platformData.value.filter((item: any) => {
        return item.attrIdAndAttrvalueId
    })
    skuParams.value.skuAttrValueList = attrIdAndAttrvalueId.map((item: any) => {
        const [attrId, valueId] = item.attrIdAndAttrvalueId.split(':')
        return {
            attrId,
            valueId
        }
    })
    const saleAttrIdAndSaleValue = saleAttrData.value.filter((item: any) => {
        return item.saleAttrIdAndSaleValue
    })
    skuParams.value.skuSaleAttrValueList = saleAttrIdAndSaleValue.map((item: any) => {
        const [saleAttrId, saleAttrValueId] = item.saleAttrIdAndSaleValue.split(':')
        return {
            saleAttrId,
            saleAttrValueId
        }
    })
    const res = await reqAddSku(skuParams)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '添加成功'
        })
        emits('changeScreen', 0)
    }
    emits('changeScreen', 0)
}

defineExpose({
    initSkuData
})
</script>

<style lang="scss" scoped></style>: any: any